<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '问题记录',
    navigationBarTextStyle: '#000000',
    navigationStyle: 'custom',
    navigationBarBackgroundColor: '#ffffff',
  },
}
</route>

<template>
  <view class="content">
    <view class="topBox">
      <view class="top-scearch">
        <view class="btnBox mb-[20upx]">
          <view class="icon">
            <wd-icon name="format-vertical-align-right" size="18px"></wd-icon>
          </view>
          <view class="allBtn">
            <text class="mr-[20upx]">
              <wd-button size="small" plain @click="getList">查询</wd-button>
            </text>
            <wd-button size="small" plain @click="reset">重置</wd-button>
            <text class="ml-[20upx]">
              <wd-button size="small" plain @click="getList">导出</wd-button>
            </text>
          </view>
        </view>
        <view class="formAll">
          <view class="allItem">
            <view class="w-[80upx]">时间</view>
            <view class="w-[85%]">
              <wd-datetime-picker
                clearable
                type="date"
                placeholder="请选择时间"
                v-model="searchForm.date"
              />
              <!-- <wd-calendar type="date" placeholder="请选择时间" v-model="searchForm.date" /> -->
            </view>
          </view>
          <view class="allItem">
            <view class="w-[80upx]">类型</view>
            <view class="w-[85%] border-b">
              <wd-select-picker
                v-model="searchForm.status"
                :columns="statusList"
                placeholder="请选择类型"
                type="radio"
                clearable
              ></wd-select-picker>
            </view>
          </view>
          <view class="allItem">
            <view class="w-[80upx]">状态</view>
            <view class="w-[85%] border-b">
              <wd-select-picker
                v-model="searchForm.status"
                :columns="statusList"
                placeholder="请选择状态"
                type="radio"
                clearable
              ></wd-select-picker>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view>
      <view class="cardBox" v-if="dataList.length > 0">
        <wd-card v-for="(item, index) in dataList" :key="index">
          <view>
            <template #title>
              <view class="dataTopBox mb-[20upx]">
                <view>问题编号：1</view>
                <view class="time">{{ item.time }}</view>
                <view class="btnBox" :class="{ btn1: item.status == 1, btn2: item.status == 0 }">
                  {{ item.status == 1 ? '待解决' : '已解决' }}
                </view>
              </view>
            </template>
            <view class="allInfo mb-[20upx]">
              <view class="item">
                <view class="mr-[20upx]">区域:</view>
                <view>{{ item.cause }}</view>
              </view>
              <view class="item">
                <view class="mr-[20upx]">问题类型:</view>
                <view>{{ item.time1 }}</view>
              </view>
              <view class="item">
                <view class="mr-[20upx]">问题描述:</view>
                <view>{{ item.time2 }}</view>
              </view>
              <view class="item">
                <view class="mr-[20upx]">问题描述:</view>
                <view>{{ item.hostel }}</view>
              </view>
              <view class="item">
                <view class="mr-[20upx]">整改措施:</view>
                <view>{{ item.hostel }}</view>
              </view>
              <view class="item">
                <view class="mr-[20upx]">责任人:</view>
                <view>{{ item.hostel }}</view>
              </view>
              <view class="item">
                <view class="mr-[20upx]">解决日期:</view>
                <view>{{ item.hostel }}</view>
              </view>
              <view class="item">
                <view class="mr-[20upx]">问题图片:</view>
                <view>
                  <wd-img :width="50" :height="50" :src="addImg" :enable-preview="true" />
                </view>
              </view>
              <view class="item">
                <view class="mr-[20upx]">整改图片:</view>
                <view>
                  <wd-img :width="50" :height="50" :src="addImg" :enable-preview="true" />
                </view>
              </view>
            </view>
            <view class="text-right">
              <text class="mr-[10upx]">
                <!-- <wd-button size="small" disabled>分配宿舍</wd-button> -->
                <wd-button size="small">开始确认</wd-button>
              </text>
              <wd-button size="small">完成确认</wd-button>
            </view>
          </view>
        </wd-card>
      </view>
      <wd-status-tip v-else image="search" tip="暂无数据" />
    </view>
    <view class="imgAdd" @click="goAdd">
      <wd-img :width="50" :height="50" :src="addImg" />
    </view>
    <wd-backtop :scrollTop="scrollTop"></wd-backtop>
  </view>
</template>

<script lang="js" setup>
import { onLoad, onReachBottom, onPageScroll } from '@dcloudio/uni-app'
import dayjs from 'dayjs'
import addImg from '@/static/add.png'
import { useColPickerData } from '@/hooks/useColPickerData'
defineOptions({
  name: 'ProblemRecord',
})
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})

const { colPickerData, findChildrenByCode } = useColPickerData()

const statusList = ref([
  {
    label: '待解决',
    value: 0,
  },
  {
    label: '解决中',
    value: 1,
  },
  {
    label: '已完成',
    value: 2,
  },
])
const selectItem = ref({})
const searchForm = ref({
  date: '',
  company: [],
})
// 宿舍列表
const companyList = ref([])
const scrollTop = ref(0)
const dataList = ref([
  {
    name: 'test',
    time: '2024-08-10',
    cause: 'test',
    time1: '2024-08-10',
    time2: '2024-08-10',
    hostel: '801',
    status: 0,
  },
])

onMounted(() => {
  companyList.value = [colPickerData]
})

// 公司选择事件
const columnChange = ({ selectedItem, resolve, finish }) => {
  const areaData = findChildrenByCode(colPickerData, selectedItem.value)
  console.log('areaData', areaData)
  if (areaData && areaData.length) {
    resolve(areaData)
  } else {
    finish()
  }
}

// 点击重置
const reset = () => {
  searchForm.value = {
    date: '',
    company: [],
  }
  getList()
}
// 获取数据
const getList = () => {}

// 跳转
const goAdd = () => {
  uni.navigateTo({
    url: '/pages/administration/problemRecord/addProblem',
  })
}
</script>

<style lang="scss" scoped>
.oppbox {
  :deep(.wd-popup) {
    background: transparent !important;
  }
}
.imgAdd {
  position: fixed;
  bottom: 40upx;
  right: 30upx;
  z-index: 999;
}
.contentBox {
  background-color: white;
  border-radius: 16px;
}
:deep() {
  .wd-search {
    padding: 0 !important;
    width: 95vw;
  }
  .wd-table__header {
    z-index: 1 !important;
  }
  .cardBox {
    .wd-card__title-content {
      padding: 14upx 0upx;
    }
    .wd-card__footer {
      padding: 14upx 0upx;
    }
  }

  .is-light {
    background-color: white !important;
  }
  .wd-search__block {
    border: 1px solid #d4d3d3 !important;
  }
}
.content {
  width: 100vw;
  min-height: 100vh;
  background-color: #f1f1f1;
  padding-top: 240px;
  .topBox {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100vw;
    background-color: white;
    .top-scearch {
      padding: 40upx 40upx 40upx 40upx;
      .btnBox {
        // background-color: rgb(211, 211, 211);
        display: flex;
        align-items: center;
        .icon {
          width: 60upx;
          height: 60upx;
          text-align: center;
          line-height: 60upx;
          border-radius: 30upx;
          margin-right: 20upx;
          background-color: rgba(243, 240, 240, 0.8);
        }
        .allBtn {
          display: inline-block;
          padding: 10upx 40upx;
          border-radius: 40upx;
          background-color: rgba(243, 240, 240, 0.8);
        }
      }
      .formAll {
        .allItem {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .border-b {
            border-bottom: 1px solid #e5e5e5;
          }
        }
      }
    }

    .tab {
      display: flex;
      align-items: center;
      margin-bottom: 20upx;
      padding: 20upx;
      justify-content: space-between;
      height: 80upx;
      .tabItem {
        width: 50%;
        text-align: center;
        .text {
          display: inline-block;
          line-height: 50upx;
        }
        .text1 {
          color: #0083ff;
          border-bottom: 5upx solid #0083ff;
        }
      }
      .tabItem:first-child {
        border-right: 1px solid #d4d3d3;
      }
    }
    .chooseBox {
      background-color: #f1f1f1;
      padding: 20upx;
    }
  }
  .dataTopBox {
    display: flex;
    font-size: 32upx;
    color: black;
    justify-content: space-between;
    align-items: center;
    .time {
      color: #a9a8a8;
      font-size: 24upx;
    }
  }
  .allInfo {
    .item {
      display: flex;
      align-items: center;
      line-height: 50upx;
    }
  }
  .btnBox {
    padding: 5upx 10upx;
    display: inline-block;
    font-size: 28upx;
  }
  .btn1 {
    border: 1px solid #cf8428;
    color: #cf8428;
    border-radius: 10upx;
  }
  .btn2 {
    border: 1px solid #75c514;
    color: #75c514;
    border-radius: 10upx;
  }
}
</style>
